﻿@page "/menus"

<h3>Menu 导航菜单</h3>

<h4>为页面和功能提供导航的菜单列表。</h4>

<Block Title="顶栏" Introduction="适用广泛的基础用法。" CodeFile="menu.1.html">
    <Menu Items="@GetItems()" OnClick="@OnClickMenu" />
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="带图标的顶栏菜单" Introduction="适用简单的网站应用，通过设置菜单项 <code>MenuItem</code> 的 <code>Icon</code> 属性设置菜单图标" CodeFile="menu.2.html">
    <Menu Items="@GetIconItems()" />
</Block>

<Block Title="侧栏" Introduction="适用于左右结构布局的网站，通过设置 <code>IsVertical</code> 更改导航菜单为侧栏" CodeFile="menu.3.html">
    <div style="width:220px;">
        <Menu Items="@GetSideMenuItems()" IsVertical="true" OnClick="@OnClickSideMenu" style="border-right: 1px solid #e6e6e6;" />
    </div>
    <Logger @ref="TraceSideMenu" class="mt-3" />
</Block>

<Block Title="带图标的侧栏菜单" Introduction="通过设置菜单项 <code>MenuItem</code> 的 <code>Icon</code> 属性设置菜单图标" CodeFile="menu.3.html">
    <div style="width:220px;">
        <Menu Items="@GetIconSideMenuItems()" IsVertical="true" style="border-right: 1px solid #e6e6e6;" />
    </div>
</Block>

<Block Title="手风琴效果的侧栏" Introduction="通过设置 <code>IsAccordion</code> 属性设置手风琴特效侧栏菜单" CodeFile="menu.4.html">
    <div style="width:220px;">
        <Menu Items="@GetIconSideMenuItems()" IsVertical="true" IsAccordion="true" style="border-right: 1px solid #e6e6e6;" />
    </div>
</Block>

<Block Title="带收缩的侧栏效果" Introduction="通过设置 <code>IsCollapsed</code> 属性设置侧栏菜单为收起状态" CodeFile="menu.5.html">
    <Alert Icon="fa fa-info">请注意 <code>IsCollapsed</code> 属性仅当 <code>IsVertical</code> 为真时才生效即仅侧边栏菜单时可用</Alert>
    <p>本例中使用布局组件 <code>Layout</code> 来进行网页构建，设置 <code>SideWith="0"</code> 关闭侧边栏宽度设置，使用内部菜单宽度来自适应</p>
    <Layout SideWidth="0" IsFullSide="true">
        <Header>
            <div class="d-flex align-items-center pl-3" style="background-color: #17a2b8; height: 50px; color: #fff;">
                <a style="padding: 4px 12px; color: #fff; background-color: #1ab394; border-color: #1ab394; border-radius: 4px;" class="@ClassString" title="点击展开收缩左侧菜单" @onclick="@CollapseMenu">
                    <i class="fa fa-bars"></i>
                </a>
                <span class="ml-3">我是网站标题</span>
            </div>
        </Header>
        <Side>
            <div class="menu-demo" style="background-color: #2f4050; color: #dcdfe6; height: 100%; padding: 6px 0;">
                <Menu Items="@GetIconSideMenuItems()" IsVertical="true" IsCollapsed="@IsCollapsed" />
            </div>
        </Side>
        <Main>
            <div style="padding: 10rem 1rem;">Main</div>
        </Main>
        <Footer>
            <div class="d-flex justify-content-center align-items-center" style="height: 30px; color: #fff; background-color: #5b6e84;"><a href="https://gitee.com/LongbowEnterprise/BootstrapAdmin" target="_blank" style="color: #fff;">Bootstrap Admin</a></div>
        </Footer>
    </Layout>
</Block>

<AttributeTable Items="@GetAttributes()" />
